<template>
  <div class='search-bar'>

    <el-steps :active="active" finish-status="success" align-center space="200px">
      <el-step title="车辆信息"></el-step>
      <el-step title="权限分配"></el-step>
    </el-steps>

    <el-form :label-width="labelWidth" :model="inputModel" :inline="true" :rules="rules" class="form1">
      <el-form-item label="车牌号:" prop="carNo">
        <el-input style="width:12.5rem" v-model="inputModel.carNo" placeholder=""></el-input>
      </el-form-item>
      <el-form-item class="interval-left" label="车牌颜色:" prop="carColor">
        <el-select v-model="inputModel.carColor" placeholder="请选择">
          <el-option v-for="item in carColorMenu" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="interval-left" label="车牌类型:" prop="carType">
        <el-select v-model="inputModel.carType" placeholder="请选择">
          <el-option v-for="item in carTypeMenu" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-form :label-width="labelWidth" :model="inputModel" :inline="true" :rules="rules" class="form2">
      <el-form-item label="司机姓名:" prop="driverName">
        <el-input style="width:12.5rem" v-model="inputModel.driverName" placeholder=""></el-input>
      </el-form-item>
      <el-form-item class="interval-left" label="司机电话:" prop="driverPhone">
        <el-input style="width:13rem" v-model="inputModel.driverPhone" placeholder=""></el-input>
      </el-form-item>
      <el-form-item class="interval-left" label="身份证号:" prop="idCard">
        <el-input style="width:12.5rem" v-model="inputModel.idCard" placeholder=""></el-input>
      </el-form-item>
    </el-form>

    <el-form :label-width="labelWidth" :model="inputModel" :inline="true" :rules="rules" class="form2">
      <el-form-item label="车辆类别:" prop="carSort">
        <el-select v-model="inputModel.carSort" placeholder="请选择">
          <el-option v-for="item in carSortMenu" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="interval-left" label="启用状态:" prop="delivery">
        <el-switch v-model="inputModel.delivery"></el-switch>
      </el-form-item>
    </el-form>
    <el-form :label-width="labelWidth" :model="inputModel" :inline="true" :rules="rules" class="form2">
      <el-form-item style="margin-left: 2.3rem;" label="备注:" >
        <el-input style="width: 57.5rem;"  type="textarea" :rows="4" placeholder="请输入内容" v-model="inputModel.remarks">
        </el-input>
      </el-form-item>
    </el-form>
    <el-button style="margin-left:25%;" type="primary"  @click="next">下一步</el-button>
    <el-button style="margin-left:1.5rem;">取消</el-button>
  </div>
</template>

<script>

export default {
  data() {
    return {
      active: 0,
      inputModel: {
        carNo: '',
        carColor: '',
        carType: '',
        driverName: '',
        driverPhone: '',
        idCard: '',
        carSort:'',
        delivery: true,
        remarks:''
      },
      carColorMenu: [{ value: 0, label: '请选择' }, { value: 1, label: '蓝色' }, { value: 2, label: '黄色' }],
      carTypeMenu: [{ value: 0, label: '请选择' }, { value: 1, label: '大车' }, { value: 2, label: '小车' }],
      carSortMenu: [{ value: 0, label: '请选择' }, { value: 1, label: '固定车' }, { value: 2, label: '临时车' }],
      rules: {
        carNo: [{ required: true, message: '请输入车牌号', trigger: 'blur' }],
        carColor: [{ required: true, message: '请选择车牌颜色', trigger: 'blur' }],
        carType: [{ required: true, message: '请选择车牌类型', trigger: 'blur' }],
        driverName: [{ required: true, message: '请输入司机姓名', trigger: 'blur' }],
        driverPhone: [{ required: true, message: '请输入司机电话', trigger: 'blur' }],
        idCard: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
        carSort: [{ required: true, message: '请选择车辆类别', trigger: 'blur' }],
        delivery: [{ required: true, trigger: 'blur' }]
      }
    }
  },
  created() {
  },
  methods: {
    next() {
      if (this.active++ > 1) this.active = 0;
    },
    handleSizeChange(v) {
      // this.pageSize = v;
      // this.currentPage = 1;
      // this.getList();
    },
    handleCurrentChange(v) {
      // this.currentPage = v;
      // this.getList();
    },
    handleDownload() {

    },
    handleEdit() {
      this.dialogFormVisible = true;
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  margin: 0.2rem;
  padding: 0.2rem;
}

.form1 {
  margin-top: 1.6rem;
  margin-left: 4rem;
}

.form2 {
  margin-top: 1.6rem;
  margin-left: 3rem;
}

.interval-left {
  margin-left: 4rem;
}

.search-bar {
  margin-bottom: .2rem;
  margin-left: 5%;
  margin-top: 3rem;
}
</style>
